<template>
  <div>
    <el-select v-model="svalue">
      <el-option
        v-for="(item, index) in options"
        :key="index"
        :label="$t(item.label)"
        :value="item.id"
      />
    </el-select>
  </div>
</template>

<script>
    import { getByIndicatorsId } from '@/api/system/home/homeIndicatorsConditions'
    export default {
        props: {
          value: {
            type: [String, Number, Array],
            default: '',
            required: true
          },
          configId: {
            type: String,
            default: () => ''
          }
        },
        data() {
          return {
            svalue: this.value,
            options: []
          }
        },
      watch: {
        value(newVal) {
          this.svalue = newVal
        },
        svalue(newVal, oldVal) {
          if (newVal !== oldVal) {
            this.$emit('input', this.svalue)
            this.$emit('change', this.svalue)
          }
        },
        configId(newVal, oldVal) {
          if (newVal !== oldVal) {
            getByIndicatorsId(this.configId).then(response => {
              this.options = response.data
            })
          }
        }
      },
      created() {
        getByIndicatorsId(this.configId).then(response => {
          this.options = response.data
        })
      }
    }
</script>

<style scoped>

</style>
